<template>
  <div>
    <xy-table
      :api="api"
      :columns="columns"
    >
      <template #addItem>
        <span></span>
      </template>
      <template #operation>
        <el-table-column
          :label="$language.local('操作')"
          align="center"
          key="ope"
          width="200"
        >
          <template slot-scope="scope">
            <el-row class="center">
              <el-col
                :span="8"
                class="center"
              >
                <el-button
                  @click="update(scope.row)"
                  size="mini"
                  type="text"
                >{{ $language.local("update") }}</el-button>
              </el-col>
              <el-col
                :span="8"
                class="center"
              >
                <el-button
                  @click="RMSet(scope.row)"
                  size="mini"
                  type="text"
                >{{ $language.local("设置额度") }}</el-button>
              </el-col>
              <el-col
                :span="8"
                class="center"
              >
                <delete-row
                  :api="api.deleteById"
                  :row="scope.row"
                ></delete-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <el-dialog
      :title="$language.local('补充资料')"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form
        :model="fileFormData"
        :rules="$rules"
        label-width="100px"
        ref="fileFormRef"
        status-icon
      >
        <el-form-item :label="$language.local('姓名')">
          <div class="ml-1">{{ row.EMPNAME }}</div>
        </el-form-item>
        <el-form-item :label="$language.local('身份证号码')">
          <div class="ml-1">{{ row.IDCARDNO }}</div>
        </el-form-item>
        <el-form-item :label="$language.local('相关文件')">
          <upload-file
            :drag="true"
            v-model="fileFormData.FilePathUrl"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击选择</em>
            </div>
            <div
              class="el-upload__tip"
              slot="tip"
            >上传文件不超过 5 MB</div>
          </upload-file>
        </el-form-item>
        <el-form-item :label="$language.local('图片信息')">
          <upload-image v-model="Imgs.imgUri"></upload-image>
        </el-form-item>
      </el-form>

      <span
        class="dialog-footer"
        slot="footer"
      >
        <el-button @click="dialogVisible = false">
          {{
          $language.local("取消")
          }}
        </el-button>
        <el-button
          @click="onSubmit('formRef')"
          type="primary"
        >
          {{
          $language.local("确定")
          }}
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="$language.local('设置额度')"
      :visible.sync="RMSetDialogVisible"
      width="40%"
    >
      <el-form
        :model="RMSetData"
        :rules="$rules"
        label-width="100px"
        ref="RMSetFormRef"
        status-icon
      >
        <el-form-item
          :label="$language.local('月份')"
          prop="Month"
        >
          <el-date-picker
            @input="selectDate"
            placeholder="选择月"
            type="month"
            v-model="selectedDate"
            value-format="yyyy-M"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          :label="$language.local('CanAcceptanceAmount')"
          prop="CanAcceptanceAmount"
        >
          <xy-input v-model="RMSetData.CanAcceptanceAmount"></xy-input>
        </el-form-item>
      </el-form>

      <span
        class="dialog-footer"
        slot="footer"
      >
        <el-button @click="RMSetDialogVisible = false">
          {{
          $language.local("取消")
          }}
        </el-button>
        <el-button
          @click="onRMSetSubmit('RMSetFormRef')"
          type="primary"
        >
          {{
          $language.local("确定")
          }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import API from "../../plugins/api";

export default {
  data() {
    return {
      api: new API("/api/RMSet/"),
      columns: {
        ID: "",
        MerchantName: "湖南潇湘人力资源服务有限公司",
        EMPNAME: "石铁刚",
        IDCARDNO: "4304000000000059",
        ServiceName: "湖南好捷科技有限公司",
        MonthCanAcceptanceAmount: 0,

        MonthAcceptanceAmount: 0,
        YearAcceptanceAmount: 0,

        MonthAcceptanceMaxAmount: 2000000,
        YearAcceptanceMaxAmount: 5000000,

        // customerName: "湖南潇湘人力资源服务有限公司",
        // FilePathUrl: "",
        // SignFileId: null,
        // SignServiceName: "@湖南好捷科技有限公司",

        // ID: 0,
        // Ctime: "2021-05-31T17:22:08",
        // MID: 64,
        // EMPID: 1665,
        // Status: 0,
        // FileAttId: "2eabff33-3df4-4b73-96bd-682d0c18ad09",
        // BeginTime: "2021-05-31",
        // EndTime: "2021-12-31",
        // ServiceID: 4,
        // ServicePhone: "",
        // SignNo: "P2105310006",
        // SignName: "",
        // USCC: "91431002MA4RA76X0G",
        // ServiceEsignature: "/upload/202006/08/20200608120200321.png",
        // SignDate: "",
        // ServiceContent: "现代服务",
        // verifysignstatus: 0,
        // OptionPhone: "",
        // Imgs: null,
        // sf: null,
      },
      fileFormData: {
        FilePathUrl: "",
      },
      dialogVisible: false,
      RMSetDialogVisible: false,
      row: "",
      Imgs: {
        imgUri: "",
      },
      selectedDate: "",
      RMSetData: {
        // ParentId: 0,
        Year: "",
        Month: "",
        CanAcceptanceAmount: "",
        // BusinessNumber: "string",
        // Status: 0,
        SID: "",
        ServiceName: "",
      },
    };
  },
  created() {},
  methods: {
    RMSet(e) {
      console.log(e);
      this.RMSetDialogVisible = true;
      this.RMSetData.SID = e.ServiceID;
      this.RMSetData.ServiceName = e.ServiceName;
    },
    update(row) {
      this.dialogVisible = true;
      console.log(row);
      this.row = row;
    },
    selectDate(e = "") {
      let arr = e.split("-");
      this.RMSetData.Year = arr[0];
      this.RMSetData.Month = arr[1];
    },
    async onSubmit() {
      console.log(this.fileFormData);
      console.log(this.Imgs);
      this.row.sf = this.fileFormData;
      this.row.Imgs = [this.Imgs];
      console.log(this.row);
      let response = await this.$http.post("/api/RMSet/UpFile", this.row);
      console.log(response);
      this.$message.success(response.data.Message);
      this.dialogVisible = false;
    },
    async onRMSetSubmit(formName) {
      console.log(this.RMSetData);
      const valided = await this.$refs[formName].validate().catch((err) => err);
      if (!valided) {
        return;
      }
      const response = await this.$http.post(
        "/api/RMSet/CreateDetail",
        this.RMSetData
      );
      console.log(response);
    },
  },
};
</script>

<style></style>
